<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no, viewport-fit=cover" />
    <meta http-equiv="Content-Security-Policy-Report-Only" />
    <title>回溯管理</title>
    <link rel="stylesheet" href="../../assets/libs/amazeui/css/amazeui.min.css" />
    <link rel="stylesheet" href="../../assets/libs/amazeui/css/amazeui.datatables.min.css" />
    <link rel="stylesheet" href="../../assets/libs/amazeui/css/app.css?v2017010301">
    <link rel="stylesheet" href="../../assets/css/core.css?v2017010301">
</head>

<body>
    <div id="app">
        <button style="border-radius: 5px;" type="button"
            class="am-btn am-btn-danger tpl-btn-bg-color-success am-btn-sm" @click='sure("2")' style="margin-right:10%">
            <span class="am-icon-reply"></span>&nbsp;返回
        </button>
        <div style="width:100%;font-weight: bold;font-size:20px;margin:20px 0;">查看详情</div>
        <div>运维信息</div>
        <div class="detailBox">
            <ul>
                <li>系统名称： <span>{{user_info.sysName}}</span></li>
                <li>设备ID： <span>{{user_info.equipmentId}}</span></li>
                <li>机构： <span>{{user_info.branchName}}</span></li>
                <li>异常ID： <span>{{user_info.exceptionId}}</span></li>
                <li>上传时间： <span>{{user_info.uploadTime}}</span></li>
                <li>用户手机号： <span>{{user_info.phoneNumber}}</span></li>
            </ul>
        </div>
        <div style="width:100%;font-weight: bold;font-size:20px;margin:20px 0;">回溯信息</div>
        <div class="detailBox">
            <ul>
                <li>业务回溯码： <span>{{user_info.id}}</span></li>
                <li>
                	<span class="look-line" @click="lookLine()">查看轨迹</span><span class="look-img"  @click="lookImg()">查看截图</span>
                </li>
                <li>视频大小： <span></span></li>
                <li>视频时长： <span>{{time}}s</span></li>
                <li style="width:800px;">
                    <div style="float:left;">操作平台：</div>
                    <table>
                        <tbody>
                            <tr>
                                <td>OS：</td>
                                <td>{{equipmentObj.os}}</td>
                                <td>OS Version：</td>
                                <td>{{equipmentObj.osVersion}}</td>
                            </tr>
                            <tr>
                                <td>Brower：</td>
                                <td>{{equipmentObj.cpu}}</td>
                                <td>Brower Version：</td>
                                <td>{{equipmentObj.browerVersioin}}</td>
                            </tr>
                            <tr>
                                <td>Device：</td>
                                <td>{{equipmentObj.device}}</td>
                                <td>CPU：</td>
                                <td>{{equipmentObj.cpu}}</td>
                            </tr>
                        </tbody>
                    </table>
                </li>
            </ul>
        </div>
        <div class="right-box" :class="{active:rightBoxShow,defaut:!rightBoxShow}">
            <div v-if="rightBoxShow" class="am-icon-angle-right" @click="rightBoxShow = false"></div>
            <div v-if="lineShow" style="height:100%;">
                <div class="am-modal-hd">轨迹查看</div>
                <div class="am-modal-bd">
                    <div v-if="uni_data.length === 0" style="line-height:100px;color:#ccc;">暂无轨迹</div>
                    <div id="uni_timeline" v-if="uni_data.length > 0">
                        <div :style="uni_space" v-for="(item,index) in uni_data" :key="index"
                            :class="[uni_data.length==index+1?uni_listbox_last:uni_listbox_notlast,uni_listbox]">
                            <p>
                                <img :src="uni_icon" :class="uni_timeline_icon">
                                <span class="uni_timeline_title">{{item.trackTime}} {{item.trackThing}}&nbsp;&nbsp;
                                    {{item.trackTodo}}</span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div v-if="imgShow" style="height:100%;">
                <div class="am-modal-hd">截图查看</div>
                <div class="am-modal-bd">
                    <div v-if="img_data.length === 0" style="line-height:100px;color:#ccc;">暂无截图</div>
                    <div id="uni_timeline" v-if="img_data.length > 0">
                        <div :style="uni_space" v-for="(item,index) in img_data" :key="index"
                            :class="[img_data.length==index+1?uni_listbox_last:uni_listbox_notlast,uni_listbox]">
                            <p>
                                <img :src="uni_icon" :class="uni_timeline_icon">
                                <span class="uni_timeline_title"
                                    @click="Magnification(item.base_code,index)">{{item.cut_time}}&nbsp;&nbsp;{{item.where_cut_name}}</span>
                            </p>
                        </div>
                    </div>
                    <div class="img-magnification" v-if="imgMagnification" @click="imgMagnification=false">
                        <div class="lt" @click.stop="last">&lt</div>
                        <div class="lt gt" @click.stop="next">&gt</div>
                        <img :src="imgSrc" alt="">
                    </div>
                </div>
            </div>
        </div>
        <!-- 提示框 -->
        <div class="am-modal am-modal-alert" tabindex="99" id="my-alert1">
            <div class="am-modal-dialog">
                <div class="am-modal-hd">提示</div>
                <div class="am-modal-bd" style="height:60px;">
                    {{tipMsg}}
                </div>
                <div class="am-modal-footer">
                    <span class="am-modal-btn" data-am-modal-confirm>确定</span>
                </div>
            </div>
        </div>
    </div>
    </div>
    <script src="../../assets/libs/amazeui/js/jquery.min.js"></script>
    <script src="../../assets/libs/vue/vue.min.js"></script>
    <script src="../../assets/libs/amazeui/js/theme.js"></script>
    <script src="../../assets/libs/amazeui/js/amazeui.min.js"></script>
    <script src="../../assets/libs/amazeui/js/amazeui.datatables.min.js"></script>
    <script src="../../assets/libs/amazeui/js/dataTables.responsive.min.js"></script>
    <script src="../../assets/libs/axios.min.js"></script>
    <script src="../../assets/libs/vue/vue.min.js"></script>
    <script src="../../assets/env.js?v2017010301"></script>
    <script src="../../assets/libs/mobile-detect.min.js"></script>



    <script id="time-cat-init">
        var app = new Vue({
            el: "#app",
            data: {
                userList: [],
                user_info: {},
                stateValue: "",
                id: '',
                businessNo: "",
                // showList: false,
                uni_timeline_icon: "uni_timeline_icon",
                uni_listbox_last: "uni_listbox_last",
                uni_listbox_notlast: "uni_listbox_notlast",
                uni_listbox: "uni_listbox",
                showList: true,
                uni_data: [],
                img_data: [],
                space: '12px',
                uni_icon: 'http://qiniu.iborge.cn/dian.png',
                applyList: [],
                imgMagnification: false, // 图片放大标识符
                imgSrc: '', // 需要放大的图片编码
                imgIndex: null,  // 放大截图的索引
                // cutName: '',  //截图名称
                tipMsg: '', // 提示语内容
                fwjl: true,   // 访问记录容器隐藏
                equipmentObj: {},
                rightBoxShow: false,
                lineShow: false,
                imgShow: false,
                time: '',
            },
            methods: {
                // 上一张截图
                last() {
                    this.imgIndex = this.imgIndex - 1
                    if (this.imgIndex < 0) {
                        this.tipMsg = '这是第一张了！'
                        $('#my-alert1').modal({
                            relatedTarget: this,
                        });
                        this.imgIndex = 0
                        return false
                    }
                    this.img_data.forEach((item, index) => {
                        console.log(item, index)
                        if (this.imgIndex == index) {
                            this.imgSrc = item.base_code
                            // this.cutName = item.where_cut_name
                        }
                    })
                },
                // 下一张截图
                next() {
                    this.imgIndex = this.imgIndex + 1
                    if (this.imgIndex >= this.img_data.length) {
                        this.tipMsg = '最后一张了！'
                        $('#my-alert1').modal({
                            relatedTarget: this,
                        });
                        console.log(this.tipMsg)
                        this.imgIndex = this.img_data.length - 1
                        return false
                    }
                    this.img_data.forEach((item, index) => {
                        if (this.imgIndex == index) {
                            this.imgSrc = item.base_code
                            // this.cutName = item.where_cut_name
                        }
                    })
                },
                // 截图放大
                Magnification(src, index) {
                    this.imgSrc = src
                    this.imgIndex = index
                    this.imgMagnification = true
                },
                sure(value) {
                    history.back(-1);
                },
                //轨迹查询
                line() {
                    let obj = {
                        collectId: this.id,
                        // collectId:'c1841b5d-093d-41a2-9cb3-99715b2b3542',
                        // collectId: "fc3a50fc-4c3d-4bd7-9de3-8aa56298dcb3",
                    };
                    axios({
                        method: 'post',
                        url: App.envUrl.backtrackUrl + "collect/queryTrackByCollectId",
                        // url: 'http://192.168.1.81:8080/slxt-web/collect/queryTrackByCollectId',  // 文华本地
                        // url:'https://www.bjnfbk.com/slxt-web/collect/queryTrackByCollectId',  // 演示环境
                        data: obj,
                    })
                        .then((data) => {
                            if (data.data.code === '200') {
                                console.log(data, '666')
                                if (data.data.data.length > 0) {
                                    this.uni_data = data.data.data;
                                }
                            }
                        })
                        .catch((err) => { });
                },
                //截图查询
                html2canva() {
                    let obj = {
                        collectId: this.id,
                    };
                    axios({
                        method: 'post',
                        url: App.envUrl.backtrackUrl + "queryFileByCollectId",
                        data: obj,
                    })
                        .then((data) => {
                            if (data.data.code === '200') {
                                this.img_data = data.data.data;

                            }
                        })
                        .catch((err) => { });
                },
                getDetail() {
                    let obj1 = {
                        id: this.id, //数据主键id
                        businessNo: this.businessNo, //业务识别号（保单号）
                    }
                    axios({
                        method: 'post',
                        url: App.envUrl.backtrackUrl + "collect/queryDataList",
                        data: obj1,
                    })
                        .then((data) => {
                            console.log(data, 'ss')
                            this.user_info = data.data.pageCount.datas[0];
                            var device_type = this.user_info.phoneModel;
                            console.log('device_type',device_type)
                            var md = new MobileDetect(device_type);//实例化mobile-detect  
                            let os = md.os();
                            console.log('os',os,md)
                            let osVersion = '';
                            if (os == "iOS") {//ios系统的处理 
                                osVersion = md.version("iPhone");
                            } else if (os == "AndroidOS") {//Android系统的处理 
                                osVersion = md.version("Android");
                            }
                            this.equipmentObj = {
                                os: md.os(),
                                osVersion: osVersion,
                                device: md.mobile(),
                                cpu: md.userAgent(),
                                engineVersion: md.version('Webkit'),
                                browerVersioin: md.version(md.userAgent())
                            }
                            console.log('equipmentObj',this.equipmentObj)
                            this.time = this.dateDiff(this.user_info.endTime, this.user_info.startTime);
                            console.log(this.user_info.endTime)
                            if (this.user_info.auditState == 0) {
                                this.stateValue = '未审核'
                            } else if (this.user_info.auditState == 1) {
                                this.stateValue = '通过'
                            } else if (this.user_info.auditState == 2) {
                                this.stateValue = '拒绝'
                            }
                        })
                        .catch((err) => { });
                },
                //查看轨迹
                lookLine() {
                    this.rightBoxShow = true;
                    this.imgShow = false;
                    this.lineShow = true;
                },
                //查看图片
                lookImg() {
                    this.rightBoxShow = true;
                    this.lineShow = false;
                    this.imgShow = true;
                },
                dateDiff(date1, date2) {
                    var type1 = typeof date1, type2 = typeof date2;
                    if (type1 == 'string')
                        date1 = this.stringToTime(date1);
                    else if (date1.getTime)
                        date1 = date1.getTime();
                    if (type2 == 'string')
                        date2 = this.stringToTime(date2);
                    else if (date2.getTime)
                        date2 = date2.getTime();
                    return (date1 - date2) / 1000;//结果是秒 
                },
                stringToTime(string) {
                    var f = string.split(' ', 2);
                    var d = (f[0] ? f[0] : '').split('-', 3);
                    var t = (f[1] ? f[1] : '').split(':', 3);
                    return (new Date(
                        parseInt(d[0], 10) || null,
                        (parseInt(d[1], 10) || 1) - 1,
                        parseInt(d[2], 10) || null,
                        parseInt(t[0], 10) || null,
                        parseInt(t[1], 10) || null,
                        parseInt(t[2], 10) || null
                    )).getTime();
                }
            },
            computed: {
                uni_space() {
                    return "height:" + this.space;
                }
            },
            mounted() {
                this.getDetail();
                this.line();
                this.html2canva();
            },
            created() {
                var query = window.location.search.substring(1);
                var vars = query.split("&");
                var id = ''
                var businessNo = ''
                console.log(id)
                for (var i = 0; i < vars.length; i++) {
                    var pair = vars[i].split("=");
                    if (pair[0] == 'id') {
                        id = pair[1];
                        this.id = id
                    }
                    if (pair[0] == 'businessNo') {
                        businessNo = pair[1];
                        this.businessNo = businessNo
                    }
                }
            }
        });
    </script>
    <style scoped>
        .am-modal-bd {
            border: none;
        }

        .right-box {
            border-radius: 10px 0 0 10px;
        }

        .am-icon-angle-right {
            position: absolute;
            left: -20px;
            width: 40px;
            height: 40px;
            color: #ccc;
            font-size: 30px;
            z-index: 3;
        }

        .active {
            width: 600px;
            height: 100%;
            background: #fff;
            position: absolute;
            right: 0px;
            top: 0px;
            z-index: 9;
            transition: right linear .3s;
        }

        .defaut {
            width: 600px;
            height: 100%;
            background: #fff;
            position: absolute;
            right: -800px;
            top: 0px;
            z-index: 9;
            transition: right linear .3s;
        }

        .look-line,
        .look-img {
            width: 90px;
            display: inline-block;
            /* background: #fff; */
            border: 1px solid #dd514c;
            color: #dd514c;
            text-align: center;
            border-radius: 5px;
            margin-right: 20px;
            font-size: 16px;
        }

        .detailBox {
            width: 100%;
            height: 100%;
        }

        .detailBox ul {
            width: 850px;
            overflow: hidden;
        }

        .detailBox ul li {
            width: 400px;
            min-height: 35px;
            float: left;
            line-height: 35px;
            color: #999;
            overflow: hidden;
        }

        .detailBox ul li table {
            border-right: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
        }

        .detailBox ul li table tr td {
            width: 300px;
            height: 30px;
            border-left: 1px solid #ccc;
            border-top: 1px solid #ccc;
            text-align: center;
            line-height: 30px;
        }

        #app {
            padding: 20px;
            width: 100%;
            height: 100%;
            position: relative;
        }

        html {
            background-color: #E9ECF3;
        }

        .user-info {
            width: 500px;
        }

        .uni_listbox {
            box-sizing: border-box;
            margin: 20px;
            height: 60px;
            position: relative;
        }

        .uni_listbox_last {
            height: 20px;
        }

        .uni_listbox_notlast {
            height: 60px;
            margin-left: 18px;
            border-left: 3px solid rgb(228, 228, 228);
        }

        #uni_timeline {
            /* max-height: 260px; */
            height: 100%;
            /* overflow-y: scroll; */
            /* min-height: 20px; */
            /* border: 1px solid #ccc; */
            background-color: #fff;
            border-radius: 5px;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
            list-style: none;
            padding-left: 0px;
            box-sizing: border-box;
            overflow: auto;
        }

        .uni_listbox p {
            position: absolute;
            top: 0;
            left: 0;
            /* transform: translateY(-50%); */
            margin-left: -9px;
            margin-top: -18px;
            vertical-align: middle;
            height: 16px;
            line-height: 16px;
        }

        .uni_timeline_icon {
            position: absolute;
            top: 0;
            left: 0;
            display: inline-block;
            width: 16px;
            height: 16px;
            vertical-align: middle;
        }

        .uni_timeline_title {
            font-weight: bold;
            text-align: left;
            font-size: 12px;
            display: inline-block;
            /* width: 500px; */
            margin: 0 30px;
            color: rgb(100, 100, 100);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .uni_timeline_content {
            text-align: left;
            height: 70%;
            padding: 10px 21px;
            font-size: 14px;
            color: rgb(100, 100, 100);
            overflow: hidden;
        }

        .user-info ul {
            min-height: 20px;
            /* border: 1px solid #ccc; */
            border-radius: 5px;
            margin: 0px;
            height: 150px;
            overflow: auto;
            /* padding-left: 5px; */
            background-color: #fff;
            margin-bottom: 20px;
            box-sizing: border-box;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }

        .user-info ul li {
            text-align: center;
            height: 30px;
            line-height: 30px;
            font-size: 14px;
            list-style: none;
            text-align: left;
            color: #838FA1;
            padding-left: 20px;
        }

        .user-info-list {
            overflow: hidden;
            width: 500px;
            height: 400px;
            min-height: 20px;
            float: left;
            margin-right: 40px;
        }

        .user-info-list1 {
            margin-top: 20px;
            /* width: 800px; */
            /* float: right; */
            min-height: 20px;
            overflow: hidden;
        }

        .user-info-list1 .info {
            width: 500px;
            float: left;
            margin-right: 10px;
        }

        .user-info-list1 .info:nth-child(1) {
            margin-right: 2%;
        }

        .list_title {
            height: 30px;
            line-height: 30px;
            padding-left: 20px;
            background-color: #fff;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            border-bottom: 1px solid #E6E6E6;

        }

        .user-info-list1 ul {
            margin: 0px;
            width: 100%;
            height: 260px;
            min-height: 20px;
            /* border: 1px solid #ccc; */
            background-color: #fff;
            border-radius: 5px;
            list-style: none;
            padding-left: 0px;
            box-sizing: border-box;
            overflow: auto;
        }

        .user-info-list ul {
            margin: 0px;
            width: 100%;
            height: 100%;
            min-height: 20px;
            /* border: 1px solid #ccc; */
            border: none;
            border-radius: 5px;
            list-style: none;
            padding-left: 0px;
            box-sizing: border-box;
            overflow: auto;
        }

        .user-info-list ul li,
        .user-info-list1 ul li {
            width: 100%;
            color: #838FA1;
            min-height: 30px;
            line-height: 30px;
            clear: both;
            padding-left: 10px;
            padding-right: 10px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .user-info-list ul li:nth-child(2n-1),
        .user-info-list1 ul li:nth-child(2n-1) {
            background: #f7f8fa;
        }

        .user-info-list ul li:nth-child(2n),
        .user-info-list1 ul li:nth-child(2n) {
            background: #fff;
        }

        .user-info-list ul li span:nth-child(1),
        .user-info-list1 ul li span:nth-child(1) {
            float: left;
            width: 18%;
        }

        .user-info-list ul li span:nth-child(2),
        .user-info-list1 ul li span:nth-child(2) {
            float: left;
            width: 80%;
        }

        .user-info-list ul li,
        .user-info-list1 ul li {
            list-style: none;
        }

        /*滚动条样式*/

        ::-webkit-scrollbar {
            width: 3px !important;
            height: 4px !important;
        }

        ::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            background: rgba(0, 0, 0, 0.2);
        }

        ::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            border-radius: 0;
            background: rgba(0, 0, 0, 0.1);
        }

        .img-magnification {
            width: 100%;
            height: 100%;
            position: absolute;
            background-color: rgba(0, 0, 0, .5);
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            overflow-y: scroll;
            overflow-x: hidden;
        }

        .img-magnification img {
            margin-left: 50%;
            transform: translateX(-50%);
            margin-top: 10px;
        }

        .lt {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: rgba(0, 0, 0, .4);
            font-size: 30px;
            color: #ccc;
            line-height: 35px;
            text-align: center;
            position: absolute;
            top: 300px;
            left: 3%;
        }

        .gt {
            position: absolute;
            top: 300px;
            left: 94%;
        }
    </style>
</body>

</html>